import React from 'react';
// import {
// 	Route,
// 	Link
// } from 'react-router-dom';
import './index.scss';
import { Carousel } from 'antd';
// import ajax from '@/api/public';

class Resource extends React.Component{
	constructor (props) {
		super(props)
		this.state={

		}
	}
	render() {
		return(
			<div className='weidai'>
				<div className='common-head home-contain'>
					<a href='#/resource'>流量资源</a> <i className='glyphicon glyphicon-toright'></i> <span>应用推广广告</span>
				</div>
				<div className='common-title' style={{marginBottom: '24px'}}>什么是应用推广广告？</div>
				<div className='text-center'>一种通过手机应用推送、传播的移动应用推广方式，所传播的信息影响受众者的意识、态度以及行为从而形成营销结果。</div>
				<div className='text-title text-center'>您的广告可以展示在这里</div>
				<div className='home-contain' style={{paddingBottom: '35px'}}>
					<div className='home-contain text-contain'>
						<span className='second-title'></span>
						<div className='text-center'>
							<div style={{marginBottom: '30px', padding: '0 141px', overflow: 'hidden'}}>
								<div className='mobile-img--group pull-left' style={{height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/1-1.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left'>
									<div className='text-group--title'>
										手机助手开屏广告
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>视觉冲击力大</span>
										</li>
										<li>
											<span>点击可跳转至H5页面</span>
										</li>
										<li>
											<span>适用于新品发布、活动</span>
											<span>引爆、APP推广等</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '70px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/1-2.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left' style={{width: '200px'}}>
									<div className='text-group--title'>
										动态开展GIF
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>视觉冲击力强、品牌元素突出</span>
										</li>
										<li>
											<span>打造最IN节日气场</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div className='text-center'>
							<div style={{marginBottom: '30px', padding: '0 26px', overflow: 'hidden'}}>
								<div className='mobile-img--group pull-left' style={{height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/2-1.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left'>
									<div className='text-group--title'>
										首页banner
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>主题性明确，突出关键</span>
											<span>内容并有效抓住</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '50px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/2-2.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left' style={{width: '145px'}}>
									<div className='text-group--title'>
										首页挂件
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>手机助手首页曝光， </span>
											<span>强势导流</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '50px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/2-3.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left' style={{width: '145px'}}>
									<div className='text-group--title'>
										今日热点
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>热点栏目，吸睛引导，</span>
											<span>下载效果强</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div className='text-center'>
							<div style={{marginBottom: '30px', padding: '0 26px', overflow: 'hidden'}}>
								<div className='mobile-img--group pull-left' style={{height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/3-1.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left'>
									<div className='text-group--title'>
										推荐首页-搜索热词
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>针对性强，搜索效果明</span>
											<span>确，成本低，效果好</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '50px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/3-2.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left' style={{width: '144px'}}>
									<div className='text-group--title'>
										搜索框内置搜索词
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>搜索框内置置顶搜索</span>
											<span>词，主动引导用户关</span>
											<span>注品牌，触达率高</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '50px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/3-3.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left' style={{width: '146px'}}>
									<div className='text-group--title'>
										软件页-搜索热词
									</div>
									<div className='text-group--nexttitle'>
										资源优势：
									</div>
									<ul>
										<li>
											<span>针对性强，搜索效果明</span>
											<span>确，成本低，效果好</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div className='text-center'>
							<div style={{marginBottom: '30px', padding: '0 26px', overflow: 'hidden'}}>
								<div className='mobile-img--group pull-left' style={{height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/4-1.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left special' style={{paddingTop: '0'}}>
									<div className='text-group--title'>
										程序锁(小图)
									</div>
									<ul>
										<li>
											<span>安装手机卫士可使用程序锁功能，有效保护个人隐私</span>
										</li>
										<li>
											<span>程序锁商业化广告位区域展示客户推广活动，点击进入H5页面</span>
										</li>
										<li>
											<span>CPM售卖日均库存6000个可进行各类人群定向</span>
										</li>
										<li>
											<span>历史点击率参考：0.9%</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '50px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/4-2.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left special' style={{width: '130px', paddingTop: '0'}}>
									<div className='text-group--title'>
										程序锁(底部大图)
									</div>
									<ul>
										<li>
											<span>安装手机卫士可使用程序锁功能，有效保护个人隐私</span>
										</li>
										<li>
											<span>底部大图展示客户广告右下角可点击进入H5页面</span>
										</li>
										<li>
											<span>CPM售卖日均库存7w个可进行各类人群定向</span>
										</li>
										<li>
											<span>历史点击率参考：3%</span>
										</li>
									</ul>
								</div>
								<div className='mobile-img--group pull-left' style={{marginLeft: '64px', height: '226px', marginBottom: '22px'}}>
									<img src={`${process.env.PUBLIC_URL}/images/mobile-border3.png`} width='100' style={{position: 'absolute', left: '0', top: '0'}}/>
									<img src={`${process.env.PUBLIC_URL}/images/4-3.png`} width='90' style={{position: 'absolute', left: '5px', top: '18px'}}/>
								</div>
								<div className='text-group pull-left special' style={{width: '146px', paddingTop: '0'}}>
									<div className='text-group--title'>
										充电屏保
									</div>
									<ul>
										<li>
											<span>可进行APP下载/点击进入H5页面两种形式推送</span>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
export default Resource;
